<script setup>
import { ref, computed } from 'vue'

// 假数据：
const metrics = ref({
  newMoviesToday: 12,
  hotMovies: 34,
  users: 12036,
  revenueToday: 532400, // 今日票房（元）
})

const weeklyTicket = ref([120, 200, 150, 220, 180, 260, 300]) // 近7日售票量
const userAdds = ref([40, 28, 56, 33, 78, 60, 45]) // 近7日新增用户
const paidRate = ref(78) // 订单支付率%

const topMovies = ref([
  { rank: 1, name: '星际远航', type: '科幻', rating: 9.1, hot: 95 },
  { rank: 2, name: '追光少年', type: '剧情', rating: 8.7, hot: 90 },
  { rank: 3, name: '极速狂飙', type: '动作', rating: 8.5, hot: 88 },
  { rank: 4, name: '深海迷城', type: '悬疑', rating: 8.2, hot: 84 },
  { rank: 5, name: '月下恋歌', type: '爱情', rating: 8.0, hot: 80 },
])

const recentOrders = ref([
  { id: 10021, user: 'Alice', movie: '星际远航', amount: 128, status: 'PAID', time: '10:12' },
  { id: 10022, user: 'Bob', movie: '追光少年', amount: 64, status: 'UNPAID', time: '10:18' },
  { id: 10023, user: 'Carol', movie: '极速狂飙', amount: 96, status: 'PAID', time: '10:25' },
  { id: 10024, user: 'David', movie: '深海迷城', amount: 72, status: 'PAID', time: '10:41' },
])

function formatCurrency(n) {
  return `￥${Number(n || 0).toLocaleString()}`
}

// SVG 折线图坐标
const chartW = 540
const chartH = 160
const padding = 8
const points = computed(() => {
  const data = weeklyTicket.value
  const maxV = Math.max(...data) + 30
  const stepX = (chartW - padding * 2) / (data.length - 1)
  return data
    .map((v, i) => {
      const x = padding + i * stepX
      const y = chartH - padding - (v / maxV) * (chartH - padding * 2)
      return `${x},${y}`
    })
    .join(' ')
})
</script>

<template>
  <div class="page">
    <div class="page-header">
      <div class="title">
        <el-icon style="margin-right:6px"><House /></el-icon>
        仪表盘
      </div>
      <!-- <el-tag type="success">假数据演示</el-tag> -->
    </div>

    <!-- KPI 指标 -->
    <div class="kpi-grid">
      <el-card class="kpi" shadow="hover">
        <div class="kpi-head primary">
          <el-icon><Film /></el-icon>
          今日新增电影
        </div>
        <div class="kpi-body">{{ metrics.newMoviesToday }}</div>
        <div class="kpi-foot">较昨日 +3</div>
      </el-card>
      <el-card class="kpi" shadow="hover">
        <div class="kpi-head success">
          <el-icon><VideoCamera /></el-icon>
          热映片数
        </div>
        <div class="kpi-body">{{ metrics.hotMovies }}</div>
        <div class="kpi-foot">环比 +6%</div>
      </el-card>
      <el-card class="kpi" shadow="hover">
        <div class="kpi-head warning">
          <el-icon><User /></el-icon>
          总用户数
        </div>
        <div class="kpi-body">{{ metrics.users.toLocaleString() }}</div>
        <div class="kpi-foot">新增 {{ userAdds[userAdds.length-1] }}</div>
      </el-card>
      <el-card class="kpi" shadow="hover">
        <div class="kpi-head danger">
          <el-icon><Tickets /></el-icon>
          今日票房
        </div>
        <div class="kpi-body">{{ formatCurrency(metrics.revenueToday) }}</div>
        <div class="kpi-foot">支付率 {{ paidRate }}%</div>
      </el-card>
    </div>

    <!-- 热门电影 TOP5 -->
    <el-card class="card" shadow="never" style="margin-top:12px">
      <template #header>
        <div class="card-title">热门电影 · TOP5</div>
      </template>
      <el-table :data="topMovies" border style="width:100%">
        <el-table-column prop="rank" label="#" width="60" />
        <el-table-column prop="name" label="片名" min-width="180" />
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag type="info">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分" width="120">
          <template #default="{ row }">
            <el-tag type="warning">{{ row.rating }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hot" label="热度" min-width="220">
          <template #default="{ row }">
            <el-progress :percentage="row.hot" :stroke-width="10" status="success" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 最近订单 -->
    <el-card class="card" shadow="never" style="margin-top:12px">
      <template #header>
        <div class="card-title">最近订单</div>
      </template>
      <el-table :data="recentOrders" border style="width:100%">
        <el-table-column prop="id" label="订单号" width="120" />
        <el-table-column prop="user" label="用户" width="140" />
        <el-table-column prop="movie" label="电影" min-width="160" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">{{ formatCurrency(row.amount) }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.status === 'PAID' ? 'success' : 'warning'">
              {{ row.status === 'PAID' ? '已支付' : '未支付' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.page { padding: 16px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.title { font-size:18px; font-weight:600; display:flex; align-items:center; }

.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.kpi-head { display:flex; align-items:center; gap:6px; font-weight:600; color:#fff; padding:8px 10px; border-radius:8px; }
.kpi-head.primary { background: linear-gradient(90deg,#409EFF,#66b1ff); }
.kpi-head.success { background: linear-gradient(90deg,#67C23A,#85d563); }
.kpi-head.warning { background: linear-gradient(90deg,#E6A23C,#f0b76a); }
.kpi-head.danger { background: linear-gradient(90deg,#F56C6C,#f78e8e); }
.kpi-body { font-size:26px; font-weight:700; padding:10px 2px; }
.kpi-foot { color:#909399; font-size:12px; }

.grid-2 { display:grid; grid-template-columns: 1fr 380px; gap:12px; margin-top:12px; }
.card-title { font-weight:600; }
.chart-wrap { display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* CSS 圆环图 */
.donut { --size: 160px; --track:#ebeef5; --primary:#67C23A; width:var(--size); height:var(--size); border-radius:50%; background: conic-gradient(var(--primary) calc(var(--value) * 1), var(--track) 0); display:flex; align-items:center; justify-content:center; margin:6px auto; position:relative; }
.donut::after { content:''; position:absolute; width: calc(var(--size) - 38px); height: calc(var(--size) - 38px); background:#fff; border-radius:50%; }
.donut-inner { position:absolute; text-align:center; }
.donut-num { font-size:22px; font-weight:700; }
.donut-text { color:#909399; font-size:12px; }

/* 迷你柱状图 */
.bars { height:160px; display:flex; align-items:flex-end; gap:10px; padding:8px; }
.bar { width:24px; background: linear-gradient(180deg,#66b1ff,#409eff); border-radius:6px; }

.card { border-radius:10px; }
</style>